<template>
    <div class="index">
        <div class="left-area-box">
            <my-left-area class="index-left" :leftcontent='leftcontent'></my-left-area>
        </div>
        <div class="index-right">
            <!-- 头 -->
            <div class="right-header">
                <div class="header-left">
                    <span>塞罕云·运营后台</span>
                </div>
                <div class="header-right">
                    <span @click="Enter">
                        <el-tooltip class="item" effect="dark" content="点击进入" placement="top">
                        <a class="MSG"> {{MSG}}</a>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="点击进入" placement="top">
                        <svg-icon icon-class="lingdang2" class-name="card-panel-icon" v-if="show ==true"/>
                        <svg-icon icon-class="lingdang1" class-name="card-panel-icon" v-else/>
                        </el-tooltip>
                    </span>

                    <span>欢迎您，{{uname}}</span>
                    <span style="padding-right:30px;padding-left:15px">{{format(time)}}</span>
                    <span class="out" @click="out()" style="color: #57A7FD;">退出</span>
                </div>
            </div>
            <div class="inner-box">
                <router-view/>
            </div>
        </div>
    </div>
</template>
<script>
    import myLeftArea from "@/components/assembly/leftArea.vue";

    export default {
        components: {myLeftArea},
        data() {
            return {
                show: false,//消息和消息铃铛的显示/切换
                uuid: '',
                client: {},
                topic: "",
                MSG: '',//接收的消息
                leftcontent: [
                    {name: '订单管理'},
                    {
                        name: '用户管理',
                        children: [
                            {name: '用户管理', index: '/index/uerManagement'},
                        ]
                    },
                    {name: '商品管理'},
                    {
                        name: '财务管理',
                        children: [
                            {name: '交易明细', index: '/index/financeBusinessesTrade'},
                            {name: '商户台账查询', index: '/index/financeBusinessesAccount'},
                            {name: '退款订单查询', index: '/index/financeBusinessesRefund'},
                            {name: ' 商户结算设置', index: '/index/financeBusinessesSettlement'},
                        ]
                    },
                    {name: '评价管理'},
                    {name: '系统管理'},
                    {
                        name: '营销活动',
                        children: [
                            {name: '新人推广', index: '/index/marketingPopularize'},
                            {name: '优惠券', index: '/index/coupon'},
                        ]
                    },
                    {
                        name: '在线客服',
                        children: [
                            {name: '在綫客服', index: '/index/serviceIndex'},
                        ]
                    },
                    {
                        name: '员工管理', 
                        children: [
                            {name: '员工管理', index: '/index/employee'},
                            {name: '角色/权限管理', index: '/index/employeeRole'},
                        ]
                    },
                    {
                        name: '商家相关', 
                        children: [
                            {name: '标签管理', index: '/index/businessCorrelation'},
                            {name: '商家跟进标签', index: '/index/businessLabel'},
                        ]
                    },
                    {name: '门店管理'},
                    {
                        name: '关于塞罕云',
                        children: [
                            {name: '塞罕云资质', index: '/index'},
                            {name: '塞罕云规则', index: '/index/aptitude'},
                            {name: '举报信息', index: '/index/report'},
                            {name: '版权信息', index: '/index/copyright'},
                            {name: '帮助中心', index: '/index/help'}
                        ]
                    },
                    {
                        name: '广告管理',
                        children: [
                            {name: '广告管理', index: '/index/advertising'},
                            // {name:'分类管理',index:'/index/classification'},
                        ]
                    },
                       {
                        name: '操作日志',
                        children: [
                            {name: '操作日志', index: '/index/operatorLog'},
                        ]
                    },
                ],
                uname: '',
                time: '',
                upnum: true,
            }
        },
        created() {
            this.getUuid()//navbar传参给客服页面    uuid登录后cookies获取的
            this.getWs();
        },
        mounted() {
            this.uname = sessionStorage.getItem('uname')
            setInterval(() => {
                this.time = Date.parse(new Date())
            }, 1000);
        },
        methods: {
            getUuid() {
                this.axios.post("/operate/sys/rabbit/falselogin?userid=" + 1).then(res => {
                    sessionStorage.setItem("uuid", res.data.data.uuid);
                    this.uuid = res.data.data.uuid;
                })
            },
            getWs() {//建立连接，头部通知消息
                this.axios.get("/operate/sys/rabbit/getrabbitMqurl").then(res => {
                    var url = res.data.data
                    this.client = Stomp.client('wss://' + url + '/ws');
                    this.connect();
                })

            },
            onConnected: function (frame) {
                // 订阅频道
                const topic = sessionStorage.getItem("uuid");
                console.log(topic);
                this.client.subscribe(topic, this.responseCallback, this.onFailed)
            },
            onFailed: function (frame) {
                console.log('MQ Failed:' + frame)
            },
            responseCallback: function (frame) {
                // 接收消息处理
                console.log('MQ msg=>', frame.body)//1通知，2客服？
                this.show = true;
                if (true) {
                    // this.MSG= frame.body;//测试用
                    var as = JSON.parse(frame.body).info;
                    this.MSG = as;
                } else {

                }
            },
            connect() {
                // 初始化mqtt客户端，并连接mqtt服务
                const headers = {
                    login: "guest",
                    password: "guest"
                }
                this.client.connect("guest", "guest", this.onConnected, this.onFailed, "kefu")
// this.client.connect(MQTT_USERNAME,MQTT_PASSWORD, this.onConnected, this.onFailed)// 有的是不需要MQTT_host的，不需要的话，就不用传这个参数
            },
            Enter() {//跳转
                this.$router.push({path: "/index/serviceIndex"});//跳转页面，uuid登录已set进cookies
            },

            out() {
                sessionStorage.clear();
                this.$store.commit('out_mutation')
                this.$router.push('/')
                window.location.reload()
            },
            format(shijianchuo) {
                var time = new Date(shijianchuo);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();
                var f = time.getMinutes();
                var s = time.getSeconds();
                //想要什么格式可以自己改
                // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
                return y + '-' + m + '-' + d + " " + this.add0(h) + ':' + this.add0(f) + ':' + this.add0(s);
            },
            //小于10的时候，前边加0（08：08：12）
            add0(m) {
                return m < 10 ? '0' + m : m
            },
        },
    }
</script>
<style scoped>
    .index {
        /* width: 100vw; */
        min-width: 1080px;
        min-height: 100vh;
        display: flex;
    }

    .left-area-box {
        width: 204px;
        z-index: 9;
    }

    .index-left {
        width: 204px;
        transition: all .3s;
        position: fixed;
    }

    .index-right {
        width: calc(100% - 204px);
        background: rgb(240, 240, 240);
    }

    .right-header {
        width: 100%;
        height: 86px;
        padding: 0 30px;
        box-sizing: border-box;
        line-height: 42px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }

    .header-left {
        font-size: 23px;
        color: #333333;
        display: flex;
        align-items: center;
    }

    .header-right {
        font-size: 16px;
        color: #666;
    }

    .inner-box {
        padding: 20px 20px 40px 20px;
        background: #fff;
        margin: 10px 0 0 10px;
        position: relative;
        /* min-height:calc(100% - 96px); */
        color: #333333;
        height: calc(100% - 86px - 10px);
    }

    .MSG {
        position: relative;
        top: 0px;
        font-size: 16px;
        text-align: center;
        width: auto;
        height: 50px;
        line-height: 50px;
        margin-right: 10px;
        display: inline-block;
        color: red;
    }

    .MSG:hover {
        color: red;
    }

</style>